<template>
  <div class="PageCartAdd" @click.stop>
    <div class="specificationChoose" v-if="food.specifications.length">
      <span class="button" @click="showSpecsWindow">
        选规格
        <i class="cornerNum" v-if="orderNum">{{orderNum}}</i>
      </span>
    </div>
    <div class="orderNumChange" v-else>
      <svg class="iconReduce" v-if="orderNum" @click="reduce">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
      </svg>
      <span class="orderNum" v-if="orderNum">{{orderNum}}</span>
      <svg class="iconAdd" @click="add">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use>
      </svg>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      foodId: this.food.item_id,
      skuId: this.food.specfoods[0].sku_id
    };
  },
  props: ['food', 'order', 'cartEvents'],
  computed: {
    orderNum() {
      let foodOrder = this.order;
      if (foodOrder) {
        let orderNum = 0;
        for (let skuId in foodOrder) {
          orderNum += foodOrder[skuId];
        }
        return orderNum;
      } else {
        return 0;
      }
    }
  },

  methods: {
    reduce() {
      this.cartEvents.reduce(this.foodId, this.skuId);
    },
    add() {
      this.cartEvents.add(this.foodId, this.skuId);
    },
    showSpecsWindow() {
      this.cartEvents.showSpecsWindow(this.foodId);
    }
  }
};
</script>

<style lang="scss">
.PageCartAdd {
  color: red;
  font-size: 0.5rem;

  .specificationChoose {
    .button {
      display: block;
      position: relative;
      font-size: 0.4rem;
      color: #fff;
      padding: 0.1rem 0.2rem;
      background-color: #3190e8;
      border-radius: 0.2rem;
      border: 1px solid #3190e8;
    }
  }

  .orderNumChange {
    display: flex;

    svg {
      width: 0.9rem;
      height: 0.9rem;
      fill: #3190e8;
    }
    .orderNum {
      font-size: 0.65rem;
      color: #666;
      min-width: 1rem;
      text-align: center;
      padding: 0 0.1rem;
      font-family: Helvetica Neue, Tahoma;
    }
  }
}
</style>